<!DOCTYPE html>
<html>

<head>
  <% include global/meta.html %>
    <% include global/top-css.html %>
      <title>yuscms</title>
</head>

<body>

  <main class="main" data-info="<%=admin.permission%>">

    <div class="ys-admin-pos c-a1a3aa">
      首页
      <span class="f-sum">></span>
      <span class="c-565b6d">栏目管理</span>
      <span class="f-sum">></span>
      <span class="c-565b6d">更新</span>
    </div>

    <div class="ys-admin-tablist">
      <div class="ys-admin-tab-header row justify-content-b">
        <p class="f-14 c-565b6d pl-8 pt-6"></p>
      </div>

      <div class="mr-10 ml-10" v-loading="loading">
        <form @submit.prevent="checkForm" name="form">
          <ul class="overflow-h">

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label" for="#">上级栏目</label>
              </div>

              <div class="col-10">
                <div class="select flex row">
                  <select class="flex" name="pid" v-model="params.pid" v-html="optionRender()">
                  </select>
                </div>
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label" for="#">栏目名称</label>
              </div>
              <div class="col-10">
                <input type="text" name="nav_name" class="input" v-model="params.nav_name" />
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label" for="#">栏目描述：</label>
              </div>
              <div class="col-10">
                <input type="text" name="nav_info" v-model="params.nav_info" class="input" />
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label" for="#">栏目排序：</label>
              </div>
              <div class="col-10">
                <input type="text" name="nav_sort" v-model="params.sort" class="input" />
              </div>
            </li>


            <li class="pd-10 mt-35">
              <div class="col-hd">
                &nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="col-bd row ml-35">
                <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
              </div>
            </li>

          </ul>
        </form>
      </div>


    </div>

  </main>

  <% include global/all-js.html %>
    <script>
      var vm = new Vue({
        el: '.main',
        data: {
          loading: true,
          list: [],
          params: {
            nav_name: "",
            nav_info: "",
            sort: 1,
            pid: "0",
            level: 1,
            id: $m.getParams('id')
          }
        },
        methods: {
          tips: function (msg) {
            this.$message({
              message: msg,
              type: "success"
            });
          },

          tipsWarn: function (msg) {
            this.$message({
              message: msg,
              type: "warning"
            });
          },

          queryById() {
            let _this = this;
            axios
              .get("/api/admin/category/queryById", {
                params: { id: _this.params.id }
              })
              .then(data => {
                let filterData = data.data;
                if (filterData.success) {
                  _this.params = filterData.data[0];
                  if (filterData.data[0].pid != 0) {
                    _this.params.pid =
                      filterData.data[0].pid + "," + (filterData.data[0].level - 1);
                  }
                  _this.loading = false;
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          getData() {
            var _this = this;
            axios
              .get("/api/admin/category")
              .then(data => {
                var filterData = data.data;
                if (filterData.success) {
                  _this.list = filterData.data;
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          optionRender: function () {
            let list = this.list;
            let str = '<option selected="selected" value="0">顶部导航</option>';

            function option(list) {
              for (var item of list) {
                if (item.pid != 0) {
                  str += `<option value="${item.id}${"," +
                    item.level}">${"&nbsp;".repeat(
                      item.level
                    )}|—${item.nav_name}</option>`;
                } else {
                  str += `<option value="${item.id}${"," +
                    item.level}">${item.nav_name}</option>`;
                }
                if (item.children) {
                  option(item.children);
                }
              }
            }

            option(list);

            return str;
          },

          isRepeat: function (fm) {
            let _this = this;
            axios
              .get("/api/admin/category/isrepeat", {
                params: {
                  nav_name: _this.params.nav_name
                }
              })
              .then(data => {
                let filterData = data.data;
                if (filterData.success) {
                  if (filterData.data.length == 0) {
                    _this.categoryEdit();
                  } else {
                    tipsWarn(_this, "此栏目已存在^_^");
                    fm.focus();
                    return false;
                  }
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          categoryEdit() {
            let _this = this;

            let params;

            if (_this.params.pid.toString().includes(",")) {
              params = {
                nav_name: _this.params.nav_name,
                nav_info: _this.params.nav_info,
                sort: 1,
                pid: _this.params.pid.split(",")[0],
                level: parseInt(_this.params.pid.split(",")[1]) + 1,
                id: _this.params.id
              };
            } else {
              params = _this.params;
            }

            axios
              .post("/api/admin/category/edit", params)
              .then(data => {
                let filterData = data.data;
                if (filterData.data.affectedRows === 1) {
                  tips(_this, "更新成功^_^");
                  _this.$router.go(-1);
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          checkForm: function () {
            var _this = this;
            if (!hasPermission("2")) {
              tipsWarn(_this, "对不起,您没有操作权限^_^");
              return;
            }
            var fm = document.form;

            if (_this.params.nav_name == "") {
              tipsWarn(_this, "栏目名称不能为空");
              fm.nav_name.focus();
              return false;
            }

            if (_this.params.sort == "") {
              tipsWarn(_this, "排序不能为空");
              fm.sort.focus();
              return false;
            }

            //修改的时候不能判断栏目名称是否重复 因为有移动栏目的情况
            _this.categoryEdit();
          }
        },

        created: function () {
          this.queryById();
          this.getData();
        },
        mounted: function () {

        }
      });
    </script>
</body>

</html>